跳到主要内容

Module 的语法

export 命令​

导出

// 写法一
export var m = 1;

// 写法二
var m = 1;
export { m };

// 写法三
var n = 1;
export { n as m };

跨模块常量​

const 声明的常量只在当前代码块有效。

export const A = 1;

export default 命令​

为模块指定默认输出。

function add(x, y) {
  return x * y;
}

export default add;

// 等同于
// export {add as default};

// app.js
import foo from "modules";

// 等同于
// import { default as foo } from 'modules';

import 命令​

导入

import { foo as bar } from "my_module";
console.log("🚀 ~ bar:", bar);

import()​

动态加载模块。

if (condition) {
    import('moduleA').then(...);
} else {
    import('moduleB').then(...);
}

Promise.all([
    import('./module1.js'),
    import('./module2.js'),
    import('./module3.js'),
])
.then(([module1, module2, module3]) => {
    ···
});

const myModule = await import('./myModule.js');
注意

vite import('@/module1.js') 不支持别名

模块的整体加载​

用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

import * as circle from "./circle";

export 与 import 的复合写法​

export { foo, bar } from "my_module";

// 可以简单理解为
import { foo, bar } from "my_module";
export { foo, bar };

// ES2020补上了这个写法。
export * as ns from "mod";

// 等同于
import * as ns from "mod";
export { ns };

import.meta​

ES2020 为 import 命令添加了一个元属性 import.meta，返回当前模块的元信息。